<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    canvas{
      background-color: black;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="1000" height="800"></canvas>
  <script>
    /** @type {HTMLCanvasElement} */
     var canvas=document.querySelector("#canvas")
    var ctx=canvas.getContext("2d")
    // var i=0
    // function qou(){
    //   i++
    // ctx.clearRect(0,0,400,400)
    // ctx.beginPath()
    // ctx.arc(100+i,100+i,20,0,Math.PI*2)
    // ctx.fill()
    // ctx.closePath()
    // console.log(i);
    // if(i>canvas.width-100){
    //   i=-i
    // }
    // requestAnimationFrame(qou)
    // }
    // qou()
    function Ball(x,y,vx,vy,radius){
      this.x=x
      this.vx=vx
      this.y=y
      this.vy=vy
      this.radius=radius
      this.update=function(){
        
        if(this.x+this.radius>=canvas.width||this.x-this.radius<=0){
          this.vx=-this.vx
        }
        else if(this.y+this.radius>=canvas.height||this.y-this.radius<=0){
          this.vy=-this.vy
        }
        this.x+=this.vx
        this.y+=this.vy
        // this.draw()
      }
      this.mask=function(){
            ctx.save();
            ctx.fillStyle="rgba(0,0,0,.1)"
            ctx.fillRect(0,0,canvas.width,canvas.height);
            ctx.restore();
      }
    this.draw=function(){
      this.mask()
    // ctx.clearRect(0,0,800,800)
    ctx.beginPath()
    // ctx.shadowColor="black"
    // ctx.shadowOffsetX=10
    // ctx.shadowBlur=10
    ctx.fillStyle="skyblue"
    ctx.arc(this.x,this.y,this.radius,0,Math.PI*2)
    ctx.fill()
    ctx.closePath()
    ctx.beginPath()
    this.update()
    // ctx.fillStyle="rgb(0,0,0,0.07)"
    // ctx.fillRect(0,0,canvas.width,canvas.height)
    // ctx.closePath()
      }
    
    }
    var ball=new Ball(100,100,2,2,30)
    function qou(){
      // ctx.clearRect(0,0,1000,800)
      ball.draw()
      ctx.beginPath()
      ctx.save()
      ctx.fillStyle="rgba(0,0,0,.1)"
      ctx.fillRect(0,0,canvas.width,canvas.height)
      ctx.closePath()
      ctx.restore()
      requestAnimationFrame(qou)
    }
    // ball.update()
    qou()
  </script>
</body>
</html>